<template>
  <div class="tab-bar-container">
    <div class="item" @click="changeTab(0, '/index')">
      <span :class="tabIndex == 0 ? 'active' : ''">首页</span>
    </div>
    <div class="item" @click="changeTab(1, '/follow')">
      <span :class="tabIndex == 1 ? 'active' : ''">同城</span>
    </div>
    <div class="item" @click="changeTab(2, '/index')">
      <span :class="tabIndex == 2 ? 'active' : ''"><img src="../assets/img/add.png"/></span>
    </div>
    <div class="item" @click="changeTab(3, '/msg')">
      <span :class="tabIndex == 3 ? 'active' : ''">消息</span>
    </div>
    <div class="item" @click="changeTab(4, '/sign')">
      <span :class="tabIndex == 4 ? 'active' : ''">我</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';
export default defineComponent({
  setup() {
    const tabIndex = ref(0);
    const router = useRouter();
    const changeTab = (e, path) => {
      tabIndex.value = e;
      router.push(path);
    };
    return { tabIndex, changeTab };
  },
});
</script>

<style scoped lang="scss">
.tab-bar-container {
  height: 49px;
  line-height: 49px;
  width: 100%;
  background-color: black;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  color: #cccccc;
  font-size: 16px;
  display: flex;
  /* 使用层级关系让被视频盖住的部分显示出来 */
  z-index: 99;
  .item {
    flex-grow: 1;
    text-align: center;
  }
  .active {
    color: #ffffff;
  }
  & > img {
    padding: 2.5px;
  }
}
</style>
